<template>
    <div class="search">
        <div class="header">
            <SearchHeader></SearchHeader>
        </div>

        <!-- 搜索框 -->
        <SearchInput></SearchInput>

        <section>
            <div class="history">

                <h2>
                    <van-icon name="underway-o" />
                    历史搜索
                    <span class="clear" @click="clearSearch">
                        <van-icon name="delete-o" />
                        清空
                    </span>
                </h2>
                <ul v-if="searchArr.length > 0">
                    <li @click="goSearch(item)" v-for="(item, index) in searchArr" :key="index">{{ item }}</li>
                </ul>
                <p v-else style="font-size: 16px;color: #999; text-align: center;">暂无历史搜索</p>
            </div>

            <!-- 猜你喜欢 -->
            <div class="like">
                <h2>
                    <van-icon name="smile-o" />
                    猜你喜欢
                </h2>
                <Like></Like>
            </div>
        </section>

        <Tabber></Tabber>
    </div>
</template>

<script>
import Tabber from '@/components/common/Tabber.vue';
import SearchHeader from '@/components/search/SearchHeader.vue';
import Like from '@/components/home/Like.vue';
import SearchInput from '@/components/search/SearchInput.vue';

import { Dialog } from 'vant';

export default {
    data() {
        return {
            searchArr: []
        }
    },
    components: {
        Tabber,
        SearchHeader,
        Like,
        SearchInput,
    },
    created() {
        this.searchArr = JSON.parse(localStorage.getItem('searchList')) || [];
    },
    methods: {
        goSearch(value) {
            this.$router.push(`/searchIndex/list?search=${value}`)
        },
        clearSearch() {
            Dialog.confirm({
                title: '清空历史记录',
                message: '您是否清空历史记录？清空将无法恢复',
                confirmButtonColor: '#58c79d',
            })
                .then(() => {
                    // on confirm
                    this.searchArr = [];
                    localStorage.setItem('searchList', JSON.stringify(this.searchArr));
                })
                .catch(() => {
                    // on cancel
                });
            
        }
    }
}
</script>

<style scoped>
.header {
    width: 100%;
    background-color: #58c79d;
}

section {
    flex: 1;
    overflow: hidden;
    background-color: #f5f5f5;
}

.van-icon {
    color: #58c79d;
}

.history h2 {
    font-size: 20px;
    font-weight: 500;
    padding: 16px;
    position: relative;
}

.history ul {
    display: flex;
    flex-wrap: wrap;
    padding: 0px 0;
}

.history ul li {

    font-size: 16px;
    border: 1px solid #ccc;
    padding: 3px 6px;
    margin: 8px 16px;
    ;
}

.like h2 {
    font-size: 20px;
    font-weight: 500;
    padding-left: 16px;
    margin-top: 80px;
}

.clear {
    position: absolute;
    right: 0;
    bottom: 17px;
    font-size: 15px;
    padding-right: 12px;
}
</style>